<script setup lang="ts">
import { ref, watch, onBeforeUnmount } from 'vue'
import { getSpuService, deleteSpuService } from '@/apis/product/spu'
import type { SpuResponseData, Records, SpuData } from '@/apis/product/spu/type'
import { useCategoryStore } from '@/stores'
import SkuForm from './SkuForm.vue'
import SpuForm from './SpuForm.vue'
import SkuView from './SkuView.vue'
const categoryStore = useCategoryStore()
const scene = ref<number>(1)
const pageNo = ref<number>(1)
const pageSize = ref<number>(3)
const total = ref<number>(0)
// 获取spu
const records = ref<Records>()
const getSpu = async (pager = 1) => {
  pageNo.value = pager
  const res: SpuResponseData = await getSpuService(
    pageNo.value,
    pageSize.value,
    categoryStore.option3
  )
  records.value = res.data.records
  total.value = res.data.total
}
// watch
watch(
  () => categoryStore.option3,
  () => {
    if (!categoryStore.option3) return
    getSpu()
  }
)
// 分页器页码改变
const changeSize = (val: number) => {
  pageSize.value = val
  getSpu()
}
// 添加SPU
const addSpu = () => {
  scene.value = 2
  spuRef.value.initSpu({})
}
// 修改SPU
const spuRef = ref()
const updateSpu = (row: SpuData) => {
  scene.value = 2
  spuRef.value.initSpu(row)
}
// 场景切换
const changeScene = (val: string) => {
  console.log('hello' + val)
  if (val === 'update') {
    getSpu(pageNo.value)
  } else {
    getSpu()
  }
}

// 添加SKU
const skuRef = ref()
const addSku = (row: SpuData) => {
  scene.value = 3
  skuRef.value.initSkuData(categoryStore.option1, categoryStore.option2, row)
}
// 查看SKU
const skuViewRef = ref()
const viewSku = (row: SpuData) => {
  skuViewRef.value.open(row.id)
}
// 删除Spu
const deleteSpu = async (row: SpuData) => {
  await deleteSpuService(row.id!)
  await ElMessage.success('删除成功')
  getSpu(records.value?.length ? pageNo.value : pageNo.value - 1)
}

// 路由跳转清除categoryStore
onBeforeUnmount(() => {
  categoryStore.option1 = ''
  categoryStore.option2 = ''
  categoryStore.option3 = ''
})
</script>

<template>
  <Category :scene="scene"></Category>
  <!-- SPU -->
  <el-card v-show="scene === 1">
    <!-- Spu结构 -->
    <div v-show="scene === 1">
      <el-button
        type="primary"
        icon="Plus"
        @click="addSpu"
        :disabled="!categoryStore.option3"
        >添加SPU</el-button
      >
      <!-- table表格 -->
      <el-table style="margin: 10px 0" border :data="records">
        <el-table-column
          label="序号"
          type="index"
          align="center"
          width="80px"
        ></el-table-column>
        <el-table-column label="SPU名称" prop="spuName"></el-table-column>
        <el-table-column
          label="SPU描述"
          prop="description"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column label="SPU操作">
          <template #default="{ row }">
            <el-button
              type="primary"
              size="small"
              icon="Plus"
              title="添加SKU"
              @click="addSku(row)"
            ></el-button>
            <el-button
              type="warning"
              size="small"
              icon="Edit"
              title="修改SPU"
              @click="updateSpu(row)"
            ></el-button>
            <el-button
              type="success"
              size="small"
              icon="View"
              title="查看SKU"
              @click="viewSku(row)"
            ></el-button>
            <el-popconfirm
              @confirm="deleteSpu(row)"
              icon="Warning"
              :title="`你确定删除${row.spuName}吗?`"
            >
              <template #reference>
                <el-button
                  type="danger"
                  size="small"
                  icon="Delete"
                  title="删除SKU"
                ></el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
        <template #empty>
          <el-empty description="暂无数据"></el-empty>
        </template>
      </el-table>
      <!-- 分页器 -->
      <el-pagination
        :total="total"
        layout="prev, pager, next,jumper, ->, sizes, total"
        v-model:current-page="pageNo"
        v-model:page-size="pageSize"
        :page-sizes="[3, 5, 10]"
        @current-change="getSpu"
        @size-change="changeSize"
      ></el-pagination>
    </div>
  </el-card>

  <el-card v-show="scene === 2">
    <!--添加、修改SPU -->
    <SpuForm v-model="scene" @changeScene="changeScene" ref="spuRef"></SpuForm>
  </el-card>

  <el-card v-show="scene === 3">
    <!-- 添加SKU -->
    <SkuForm v-model:sceneValue="scene" ref="skuRef"></SkuForm>
  </el-card>

  <!-- SkuView组件 -->
  <SkuView ref="skuViewRef"></SkuView>
</template>

<style lang="scss" scoped>
.el-card {
  margin: 10px 0;
}
</style>
